<template>
	<div class="w">
		<div class="text">
			我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍
		</div>
		<div class="container" ref="contRef">
			<img v-for="(item, i) in img" :key="item.id" src="../assets/mao.jpg" @mouseover="mouseover(i)" />
		</div>
	</div>
</template>

<script setup>
import { ref } from 'vue'
const img = ref([
	{
		url: '../assets/mao.jpg'
	},
	{
		url: '../assets/mao.jpg'
	},
	{
		url: '../assets/mao.jpg'
	}
])
const contRef = ref(null)

const mouseover = (i) => {
	for (let j = 0; j < contRef.value.children.length; j++) {
		if (i == j) {
			contRef.value.children[j].style.width = '100%'
		} else {
			contRef.value.children[j].style.width = '150px'
		}
	}
}
</script>

<style lang="scss" scoped>
.w {
	width: 1020px;
	margin: 0 auto;
	background-color: #ecf5ff;
}

.container {
	display: flex;
	align-items: center;
	margin-top: 20px;
	> img {
		cursor: pointer;
		width: 150px;
		height: 300px;
		transition: width 0.5s ease;
		object-fit: none;
		&:nth-child(1) {
			width: 100%;
		}
		&:nth-child(2) {
			margin: 0 10px;
		}
	}
}
</style>
